<template>
  <div class="box">
    <div class="half">
      <div class="new">
        <h3>百货上新</h3>
        <span>NEW ARRIALS</span>
      </div>
      <div class="bazaar">
        <img src="@/assets/kang/17.png" alt />
        <button class="juicer" @click="fun('/')">
          <img src="@/assets/kang/18.png" alt />
          <div class="tea">
            <h4>喜茶果汁茶 6瓶入/···</h4>
            <p>地中海桃桃金凤味/伊比利···</p>
            <h3>￥48.00</h3>
            <button>立即购买</button>
          </div>
        </button>
      </div>
      <div class="bubble">
        <img src="@/assets/kang/19.png" alt />
        <div class="mixture">
          <button @click="fun('/')">
            <img src="@/assets/kang/18.png" alt />
            <div class="teasa">
              <h4>喜茶果汁茶 6瓶入/···</h4>
              <p>地中海桃桃金凤味/伊比利···</p>
              <h3>￥48.00</h3>
              <button>立即购买</button>
            </div>
          </button>
          <button @click="fun('/')">
            <img src="@/assets/kang/18.png" alt />
            <div class="teasa">
              <h4>喜茶果汁茶 6瓶入/···</h4>
              <p>地中海桃桃金凤味/伊比利···</p>
              <h3>￥48.00</h3>
              <button>立即购买</button>
            </div>
          </button>
          <button @click="fun('/')">
            <img src="@/assets/kang/18.png" alt />
            <div class="teasa">
              <h4>喜茶果汁茶 6瓶入/···</h4>
              <p>地中海桃桃金凤味/伊比利···</p>
              <h3>￥48.00</h3>
              <button>立即购买</button>
            </div>
          </button>
          <button @click="fun('/')">
            <img src="@/assets/kang/18.png" alt />
            <div class="teasa">
              <h4>喜茶果汁茶 6瓶入/···</h4>
              <p>地中海桃桃金凤味/伊比利···</p>
              <h3>￥48.00</h3>
              <button>立即购买</button>
            </div>
          </button>
          <button @click="fun('/')">
            <img src="@/assets/kang/18.png" alt />
            <div class="teasa">
              <h4>喜茶果汁茶 6瓶入/···</h4>
              <p>地中海桃桃金凤味/伊比利···</p>
              <h3>￥48.00</h3>
              <button>立即购买</button>
            </div>
          </button>
        </div>
      </div>
      <div class="bazaar">
        <img src="@/assets/kang/17.png" alt />
        <button class="juicer" @click="fun('/')">
          <img src="@/assets/kang/18.png" alt />
          <div class="tea">
            <h4>喜茶果汁茶 6瓶入/···</h4>
            <p>地中海桃桃金凤味/伊比利···</p>
            <h3>￥48.00</h3>
            <button>立即购买</button>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun(url) {
      this.$router.push(url);
    },
    funb(url) {
      this.$router.replace(url);
    }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.half {
  width: 90%;
  height: 100%;
  margin: auto;
}
.new {
  height: 0.5rem;
  background-color: white;
  line-height: 0.5rem;
  margin-bottom: 0.1rem;
}
.new > h3 {
  font-size: 0.15rem;
  float: left;
}
.new > span {
  float: left;
  text-indent: 0.1rem;
  font-size: 0.09rem;
  color: gainsboro;
}
.bazaar {
  width: 100%;
  height: 3.25rem;
  background-color: white;
  border-radius: 0.05rem;
}
.bazaar > img {
  width: 100%;
}
.juicer {
  width: 100%;
  height: 1.7rem;
  border: 0.05rem solid #f2f2f2;
  background: none;
}
.juicer > img {
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  float: left;
}
.tea {
  width: 1.58rem;
  height: 1.62rem;
  float: right;
  /* background-color: wheat; */
}
.tea > h4 {
  width: 100%;
  height: 0.25rem;
  margin-top: 0.3rem;
}
.tea > p {
  height: 0.15rem;
  font-size: 0.1rem;
  margin-bottom: 0.1rem;
}
.tea > h3 {
  /* float: left; */
  margin-bottom: 0.1rem;
  margin-left: -0.85rem;
}
.tea > button {
  width: 0.72rem;
  height: 0.25rem;
  background-color: black;
  color: white;
  border-radius: 0.2rem;
  font-size: 0.1rem;
  float: left;
  margin-left: 0.05rem;
}
.bubble {
  height: 9.98rem;
  background-color: #f1f3f2;
  margin-bottom: 0.15rem;
}
.bubble > img {
  width: 100%;
  float: left;
}
.mixture {
  height: 9.9rem;
  border: 0.05rem solid #f1f3f2;
  margin-bottom: 0.1rem;
}
.mixture > button {
  width: 100%;
  height: 1.615rem;
  border: none;
  background: none;
  background-color: white;
  margin-bottom: 0.09rem;
}
button > img {
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  float: left;
}
.teasa {
  width: 1.58rem;
  height: 1.62rem;
  float: right;
  /* background-color: wheat; */
}
.teasa > h4 {
  width: 100%;
  height: 0.25rem;
  margin-top: 0.3rem;
}
.teasa > p {
  height: 0.15rem;
  font-size: 0.1rem;
  margin-bottom: 0.1rem;
}
.teasa > h3 {
  /* float: left; */
  margin-bottom: 0.1rem;
  margin-left: -0.85rem;
}
.teasa > button {
  width: 0.72rem;
  height: 0.25rem;
  background-color: black;
  color: white;
  border-radius: 0.2rem;
  font-size: 0.1rem;
  float: left;
  margin-left: 0.05rem;
}
</style>